<template>
    <div>
        <div class="bigDiv">
            <div class="leftDiv">
                <nav @click="Btn1">物品统计</nav>
                <nav @click="Btn2">办公用品统计</nav>
                <nav>物品领用出入库统计</nav>
                <nav>办公用品费用结算表</nav>
            </div>
            <div class="rigthDiv">
                <!-- 物品统计 -->
                <div class="div1" v-show="vShow == 1">
                    <!-- 头部搜索 -->
                    <div class="divTop">
                        <span> 物品: </span>
                        <el-select v-model="searchInfo.searchGoodsSorts"  size="mini" style="width:10%;margin-right: 2%;" @change="changeGetGoods">
                            <el-option value = "0" label="全部" ></el-option>
                            <el-option 
                                    v-for="item in goodsSortsList"
                                    :key="item.value"
                                    :label="item.goodsSortsName"
                                    :value="item.goodsSortsId"
                            ></el-option>
                        </el-select>
                        <el-select v-model="searchInfo.searchGoodsName"  size="mini" style="width:10%;margin-right: 2%;">
                            <el-option value = "0" label="全部" ></el-option>
                            <el-option 
                                    v-for="item in goodsList"
                                    :key="item.value"
                                    :label="item.goodsName"
                                    :value="item.goodsId"
                            ></el-option>
                        </el-select>
                        <span>使用方式:</span>
                        <el-select v-model="searchInfo.searchGoodsUseType"  size="mini" style="width:10%;margin-right: 2%;">
                            <el-option value = "0" label="全部" ></el-option>
                            <el-option 
                                    v-for="dict in dict.type.goods_user_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                            ></el-option>
                        </el-select>
                        <el-button type="primary" size="mini" style="width:10%" @click="btnSearch">统计</el-button>
                    </div>
                    <!-- 主体部分 -->
                    <div class="divTheme">
                        <el-table v-loading="loading" :data="goodsPage.list" >
                            <el-table-column label="物品名称" prop="goodsName"></el-table-column>
                            <el-table-column label="所属分类" prop="goodsSortsNoid"></el-table-column>
                            <el-table-column label="规格型号" prop="goodsType"></el-table-column>
                            <el-table-column label="使用方式">
                                <template scope="scope">
                                    <span>{{scope.row.goodsUserType|filterGender}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="单价(元)" prop="wPrice"></el-table-column>
                            <el-table-column label="入库总量" prop="goodsAllTotal"></el-table-column>
                            <el-table-column label="出库总量">
                                <template scope="scope">
                                    {{scope.row.goodsAllTotal - scope.row.goodsRemainderNumber}}
                                </template>
                            </el-table-column>
                            <el-table-column label="当前库存" prop="goodsRemainderNumber"></el-table-column>
                        </el-table>
                            
                        <pagination
                            v-show="total>0"
                            :total="total"
                            :page.sync="goodsPage.pageNum"
                            :limit.sync="goodsPage.pageSize"
                            layout="prev, pager, next, jumper"
                            @pagination="getGoodsStatistics"
                            />
                    </div>
                </div>
                
                <!-- 办公用品统计 -->
                <div class="div2" v-show="vShow == 2">
                    <!-- 头部搜索 -->
                    <div class="divTop">
                        <span> 部门: </span>
                        <el-select v-model="searchInfo.searchGoodsUseType"  size="mini" style="width:10%;margin-right: 2%;">
                            <el-option value = "0" label="全部" ></el-option>
                            <el-option 
                                    v-for="dict in dict.type.goods_user_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                            ></el-option>
                        </el-select>
                        <span> 物品:</span>
                        <el-select v-model="searchInfo.searchGoodsSorts"  size="mini" style="width:10%;margin-right: 2%;" @change="changeGetGoods">
                            <el-option value = "0" label="全部" ></el-option>
                            <el-option 
                                    v-for="item in goodsSortsList"
                                    :key="item.value"
                                    :label="item.goodsSortsName"
                                    :value="item.goodsSortsId"
                            ></el-option>
                        </el-select>
                        <el-select v-model="searchInfo.searchGoodsName"  size="mini" style="width:10%;margin-right: 2%;">
                            <el-option value = "0" label="全部" ></el-option>
                            <el-option 
                                    v-for="item in goodsList"
                                    :key="item.value"
                                    :label="item.goodsName"
                                    :value="item.goodsId"
                            ></el-option>
                        </el-select>
                        <span>入库时间:</span>
                        <el-date-picker v-model="searchInfo.searchTime" placeholder=""  size="mini" style="margin-right:2%;"></el-date-picker>
                        <el-button type="primary" size="mini" style="width:10%" @click="btnSearch">统计</el-button>
                    </div>
                    <!-- 主题 -->
                    <div class="divTheme"> 
                        <nav class="bigText">物品领用统计表</nav>
                        <div class="Icon">
                            <div ref="commandstats" style="height:500%;" />
                        </div>
                        <div class="Icon">
                            <div ref="commandstats2" style="height: 500%;" />
                        </div>
                    </div>
                </div>

            </div>
        </div>  
    </div>
</template>

<script>
import echarts from "echarts";
import {getByGoodsSortsNoidGoods , getGoodsStatisticsList , getGoodsAllList} from "@/api/administration/goods/goods";
import { goodsSortsAllList } from "@/api/administration/goodsSorts/goodsSorts";
import { getDeptsList } from "@/api/system/dept";


export default {
    name: 'RuoyiUiIndex',
    dicts:['goods_user_type','al_state','goods_user_type','a_approver_id'],
    data() {
        return {
            loading:false,
            vShow:1,
            total:0,
            searchInfo:{
                searchGoodsSorts:'',
                searchGoodsName:'',
                searchGoodsUseType:'',
                searchTime:'',
            },
            goodsPage:{
                pageNum:1,
                pageSize:8,
                list:[],
            },
            goods:{
                goodsSortsNoid:'',
                goodsId:'',
                goodsSortsId:'',
                goodsUserType:''
            },
            goodsSortsList:[],
            goodsList:[],
            deptsList:[],

            commandstats: null,
            option :{
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                data: [],
                axisTick: {
                    alignWithLabel: true
                }
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                color:'#5470c6',
                data: []
                }
            ]
            },
            commandstats2:[],
            option2 :{
                title: {
                    text: 'Stacked Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ["技术部1","技术部2","技术部3","技术部4","技术部5","技术部6"]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: { 
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '技术部1',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '技术部2',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                ]
                }
        }
    },

    mounted(){
        this.getGoodsSorts();
        this.getGoodsStatistics();
    },

    methods: {
        // 头部下拉框物品
        getGoodsSorts(){
            goodsSortsAllList().then(rel=>{
                if(rel.code == 200){
                    this.goodsSortsList = rel.data;
                }
            })
        },
        //点击物品实现联动
        changeGetGoods(row){
            this.goods.goodsSortsNoid = row;
            getByGoodsSortsNoidGoods(this.goods).then(rel=>{
                console.log(this.goodsList);
                this.goodsList = rel.data;
            })  
        },
        //获取物品统计列表
        getGoodsStatistics(){
            this.loading = true;
            this.goods.goodsSortsId = this.searchInfo.searchGoodsSorts;
            this.goods.goodsId = this.searchInfo.searchGoodsName;
            this.goods.goodsUserType = this.searchInfo.searchGoodsUseType;
            getGoodsStatisticsList(this.goods).then(rel=>{
                this.loading = false;
                this.goodsPage.list = rel.data;
            })
        },
        //物品统计查询
        btnSearch(){
            this.goodsPage.pageNum = 1;
            this.getGoodsStatistics();
        },

        //获取部门
        
        
        /**
         * 可视化
         */
        getPage() {
            this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
            this.commandstats.setOption(this.option);
        },
        getPage2() {
            this.commandstats2 = echarts.init(this.$refs.commandstats2, "macarons");
            this.commandstats2.setOption(this.option2);
        },
        /**
         * 先要获取部门
         */
        getDepts(){
            getDeptsList().then(rel=>{
                this.deptsList = rel.data;
                console.log(this.deptsList);
                let arr = [];
                let number = [];
                for (let i = 0; i < this.deptsList.length; i++){
                    arr.push(this.deptsList[i].deptName);
                    number.push(this.deptsList[i].number)
                }
                this.option.xAxis[0].data = arr;
                this.option.series[0].data = number;
                this.option2.legend.data = arr;
                this.getPage();
            })   
          
        },
        getGoods(){
            getGoodsAllList().then(rel=>{
                let goodsArr = [];
                this.goodsList = rel.data;
                for (let i = 0; i < this.goodsList.length; i++){
                    goodsArr.push(this.goodsList[i].goodsName);
                }
                console.log(goodsArr);
                this.option2.xAxis.data = goodsArr;
                this.getPage2();
            })
        },
        
        
        
        //导航栏点击
        Btn1(){
            this.vShow = 1;
        },
        Btn2(){
            this.vShow = 2;
            this.getDepts();
            this.getGoods();
        }
        
    },
    
    filters:{
        filterGender(val) {
            if (val == "2") {
                return "领用";
            } else if (val == '1') {
                return "借用";
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.leftDiv{
    // border: 1px red solid;
    width: 14%;
    height: 100%;
    border-right: 1px solid rgb(221, 218, 218);
}
.leftDiv nav{
    font-size: 14px;
    padding: 8% 8% 8% 12%;
    border-bottom:1px rgb(221, 218, 218) solid ;
}
nav:hover{
    color: rgb(85, 121, 199);
    cursor:pointer;
}
.bigDiv .rigthDiv{
    // border: 1px red solid;
    width: 70%;
    margin-right: 8%;
    margin-top: -13%;
    float: right;
}
.divTop span{
    font-size: 14px;
}
.divTheme{
    margin-top: 4%;
}
.bigText{
    // border: 1px red solid
    font-size: 20px;
    text-align: center;
}
.Icon{
    margin-top: 2%;
}

</style>